<!-- 我的应用 -->
<template>
    <div class="myapp-container">
        <div class="top-bar">
            <div class="title">
                <span>Hi 邵志军，下午好！</span>
                <span>你可以从这里开始创建应用～</span>
            </div>
            <div class="button-list">
                <el-button type="primary">创建空白应用</el-button>
            </div>
        </div>
        <div class="search-bar">
            <div class="input">
                <el-input placeholder="按应用名称查询"></el-input>
                <!-- v-model="keywords"
                    @keyup.enter="search" -->
            </div>
            <div class="more">sdfsdfsd</div>
        </div>
        <div class="app-list">
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
        </div>
    </div>
</template>
<script lang="ts" setup>
// import { ref } from 'vue'
// const keywords = ref('')
// const search = () => {}
</script>

<style lang="scss" scoped>
.myapp-container {
    width: 100%;
    height: 100%;
    .top-bar {
        display: flex;
        align-items: center;
        justify-content: space-between;
        height: 80px;
        padding: 0 36px;
        background-color: var(--background-color-primary-hover);
        .title span {
            &:first-child {
                font-size: 18px;
                font-weight: 500;
            }
            &:nth-child(2) {
                color: var(--text-color-secondary);
                margin-left: 15px;
            }
        }
        .button-list {
            display: flex;
        }
    }
    .search-bar {
        display: flex;
        align-items: center;
        justify-content: space-between;
        height: 52px;
        .input {
        }
    }
    .app-list {
        width: var(--width-body);
        margin: auto;
        padding: 20px 0px;
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        //声明行间距和列间距
        gap: 15px;
        .item {
            height: 188px;
            box-sizing: border-box;
            background: red;
            border: 1px solid var(--border-color-light);
            border-radius: 8px;
            padding: 20px 16px 20px 16px;
            position: relative;
            cursor: pointer;
            display: flex;
            align-items: center;
            &:hover {
                transform: translateY(-1px);
                box-shadow: 0 4px 16px 0 var(--background-color-primary-hover);
            }
        }
    }
}
</style>
